<template>

  <nav>
    <div class="pagination-actions">
      <span
        dir="auto"
        class="pagination-label"
      >
        {{ $tr('pagination', { visibleStartRange, visibleEndRange, numFilteredItems }) }}
      </span>
      <div class="pagination-buttons">
        <KIconButton
          :ariaLabel="$tr('previousResults')"
          :disabled="previousButtonDisabled"
          size="small"
          icon="back"
          @click="changePage(-1)"
        />
        <KIconButton
          :ariaLabel="$tr('nextResults')"
          :disabled="nextButtonDisabled"
          size="small"
          icon="forward"
          @click="changePage(+1)"
        />
      </div>
    </div>
  </nav>

</template>


<script>

  import clamp from 'lodash/clamp';

  export default {
    name: 'PaginationActions',
    props: {
      itemsPerPage: {
        type: Number,
        required: true,
      },
      totalPageNumber: {
        type: Number,
        required: true,
      },
      value: {
        type: Number,
        required: true,
      },
      numFilteredItems: {
        type: Number,
        required: true,
      },
    },
    computed: {
      startRange() {
        return (this.value - 1) * this.itemsPerPage;
      },
      visibleStartRange() {
        return Math.min(this.startRange + 1, this.numFilteredItems);
      },
      endRange() {
        return this.value * this.itemsPerPage;
      },
      visibleEndRange() {
        return Math.min(this.endRange, this.numFilteredItems);
      },
      previousButtonDisabled() {
        return this.value === 1 || this.numFilteredItems === 0;
      },
      nextButtonDisabled() {
        return (
          this.totalPageNumber === 1 ||
          this.value === this.totalPageNumber ||
          this.numFilteredItems === 0
        );
      },
    },
    methods: {
      changePage(change) {
        // Clamp the newPage number between the bounds if browser doesn't correctly
        // disable buttons (see #6454 issue with old versions of MS Edge)
        this.$emit('input', clamp(this.value + change, 1, this.totalPageNumber));
      },
    },
    $trs: {
      previousResults: {
        message: 'Previous results',
        context:
          'Text which indicates the previous page of results when a user makes a search query.\n',
      },
      nextResults: {
        message: 'Next results',
        context: 'Text which indicates the next page of results when a user makes a search query.',
      },
      pagination: {
        message:
          '{ visibleStartRange, number } - { visibleEndRange, number } of { numFilteredItems, number }',
        context: "Refers to pagination. Only translate the word \"of''.",
      },
    },
  };

</script>


<style lang="scss" scoped>

  .pagination-actions {
    display: flex;
    gap: 8px;
    align-items: center;

    .pagination-buttons {
      display: flex;
      gap: 4px;
    }
  }

</style>
